from dash import html
import dash_bootstrap_components as dbc
## a beatiful navigator 
navbuttonStyle={'background-color':'#fff','color':'#000','border':'#000','margin':'10px'}
def navigator():
    return html.Div([
        html.Div([
        html.Img(src='static/images/tiandao1.jpg',className='logo',style={'width':'30px','height':'30px'}),
        html.H3('天道',className='logoText',style={'margin':'0px 10px'}),
        ],className='logoDiv',style={'display':'flex','flex-grow': 1,'flex-direction':'row','align-items':'center','margin':'0px'}),
        dbc.Button('天道背景',id='backgroudButt',href='/background',style=navbuttonStyle),
        dbc.Button('天道数据',href='/datapannel',style=navbuttonStyle),
        dbc.Button('天道论坛',href='/garden',style=navbuttonStyle),
        dbc.Button('天道二创',href='/creation',style=navbuttonStyle),
    ],className='navigator',style={'display':'flex','flex-grow': 1,'justify-content':'space-around','margin':'10px','align-items':'center','border-bottom':'2px solid #000'}) 
    # top | right | bottom | left 
